<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/鼠标坐标.css">
</head>

<body>
    <div class="progress">
        <div class="bar"></div>
        <div class="circle"></div>
        <div class="mask"></div>
    </div>
    <script>
        var mask = document.querySelector(".mask");
        var bar = document.querySelector(".bar");
        var circle = document.querySelector(".circle");
        var maskStyle = getComputedStyle(mask,null);
        var circleStyle = getComputedStyle(circle, null);
        mask.onmousedown = function (e) {
            e.preventDefault();
            reset(e.offsetX);
            mask.onmousemove = function (e1) {
                if(e1.target==circle)return;
                reset(e1.offsetX);
            }
        }
        mask.onmouseup = function () {
            this.onmousemove = null;
        }
        mask.onmouseleave = function () {
            this.onmousemove = null;
        }
        function reset(x) {
            bar.style.width = x + "px";
            circle.style.left = x - parseInt(circleStyle.width) / 2 + "px";
        }
    </script>
</body>

</html>